<template>
  <el-dropdown trigger="click">
    <div class="avatar">
      <img :src="userInfo.avatar || '/avatar.jpg'" alt="avatar" />
    </div>
    <template #dropdown>
      <el-dropdown-menu class="user_info">
        <el-dropdown-item @click="handleCommand('profile')">
          <el-icon>
            <User />
          </el-icon>
          个人资料
        </el-dropdown-item>
        <el-dropdown-item @click="handleCommand('settings')">
          <el-icon>
            <Setting />
          </el-icon>
          系统设置
        </el-dropdown-item>
        <el-dropdown-item>
          <el-icon><Document /></el-icon>
          <a href="https://wocwin.github.io/t-ui/" target="_blank">vue2基础组件文档</a>
        </el-dropdown-item>
        <el-dropdown-item>
          <el-icon><Document /></el-icon>
          <a href="https://wocwin.github.io/t-ui-plus/" target="_blank">vue3基础组件文档</a>
        </el-dropdown-item>
        <el-dropdown-item @click="handleCommand('logout')" divided>
          <el-icon>
            <SwitchButton />
          </el-icon>
          退出登录
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import { User, Setting, Document, SwitchButton } from "@element-plus/icons-vue";
import { removeToken } from '../../utils/cookies';
import actions from '../../stores/globalState';
import { clearUserInfoFromStorage } from '../../utils/userInfo';

const router = useRouter();

// 用户信息，从全局状态获取
const userInfo = reactive({
  id: '',
  name: '',
  nickname: '',
  username: '',
  avatar: '',
  role: ''
});

// 监听全局状态变化
actions.onGlobalStateChange((state: any, prev: any) => {
  if (state.user && state.user !== prev.user) {
    userInfo.id = state.user.id;
    userInfo.name = state.user.name;
    userInfo.nickname = state.user.nickname;
    userInfo.username = state.user.username;
    userInfo.avatar = state.user.avatar;
    userInfo.role = state.user.role;
  }
});

// 用户操作处理
const handleCommand = (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/system/profile');
      break;
    case 'settings':
      router.push('/system/settings');
      break;
    case 'logout':
      ElMessageBox.confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除token
        removeToken();
        // 清除本地存储的用户信息
        clearUserInfoFromStorage();
        // 更新全局状态
        actions.setGlobalState({
          user: {
            id: '',
            name: '',
            nickname: '',
            username: '',
            avatar: '',
            role: '',
            permissions: []
          },
          token: ''
        });
        // 跳转到登录页
        router.push('/login');
        ElMessage.success('已退出登录');
      }).catch(() => {});
      break;
  }
};
</script>

<script lang="ts">
export default {
  name: 'Avatar'
};
</script>

<style scoped lang="scss">
.avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 50%;
  img {
    width: 100%;
    height: 100%;
  }
}
.user_info {
  cursor: pointer;
  :deep(.el-dropdown-menu__item) {
    display: flex;
    align-items: center;
    flex-direction: inherit;
    a {
      user-select: none;
    }
  }
}
</style>
